<template>
  <div>
    <div
      class="g-clickable button connect"
      v-if="checkAccount"
      @click="connect"
    >
      <span>Connect Wallet</span>
    </div>
    <div class="g-clickable button disabled" v-else-if="checkAmount">
      <span>Please enter a amount</span>
    </div>
    <div class="g-clickable button disabled" v-else-if="checkBalance">
      <span>Insufficient Balance</span>
    </div>
    <div class="g-clickable button disabled" v-else-if="isSwap && !aggCode">
      <span>Select Aggregator</span>
    </div>
    <div :class="{ group: unLockType === '' }" v-else-if="checkApprove">
      <div
        class="g-clickable button"
        v-if="unLockType === '' || unLockLoading"
        @click="unlock('0')"
      >
        <span>Unlock {{ amount }} {{ from.symbol }}</span>
        <svg
          version="1.1"
          id="L9"
          viewBox="0 0 100 100"
          enable-background="new 0 0 0 0"
          xml:space="preserve"
          v-if="unLockLoading"
        >
          <path
            fill="#fff"
            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
          >
            <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="1s"
              from="0 50 50"
              to="360 50 50"
              repeatCount="indefinite"
            ></animateTransform>
          </path>
        </svg>
      </div>
      <div
        class="g-clickable button"
        v-if="unLockType === '' || infiniteUnLockLoading"
        @click="unlock('1')"
      >
        <span>Infinite Unlock</span>
        <svg
          version="1.1"
          id="L9"
          viewBox="0 0 100 100"
          enable-background="new 0 0 0 0"
          xml:space="preserve"
          v-if="infiniteUnLockLoading"
        >
          <path
            fill="#fff"
            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
          >
            <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="1s"
              from="0 50 50"
              to="360 50 50"
              repeatCount="indefinite"
            ></animateTransform>
          </path>
        </svg>
      </div>
    </div>
    <div class="g-clickable button" v-else @click="$emit('confirm')">
      <span>Swap</span>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { mapState } from "vuex";
import BigNumber from "bignumber.js";
import { getBalance, sendApproveTo } from "@/init";
import { isNativeToken } from "@/config/config";

export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    amount: {
      type: [Number, String],
      default: 0,
    },
    aggCode: {
      type: String,
      default: ''
    },
    isSwap: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      from: (state) => state.from,
      to: (state) => state.to,
      account: (state) => state.account,
    }),
    checkAccount() {
      return !this.account;
    },
    checkAmount() {
      return +this.amount === 0;
    },
    checkBalance() {
      return (
        +this.from.balance <= 0 ||
        new BigNumber(this.from.balance).comparedTo(this.amount) < 0
      );
    },
    checkApprove() {
      console.log('checkApprove', this.from.balance, this.from.allowance, this.amount, new BigNumber(this.from.allowance).comparedTo(this.amount));
      return (
        !isNativeToken(this.from.address) &&
        (+this.from.allowance === 0 ||
          new BigNumber(this.from.allowance).comparedTo(this.amount) < 0)
      );
    },
  },
  data() {
    return {
      unLockType: "",
      unLockLoading: false,
      infiniteUnLockLoading: false,
    };
  },
  methods: {
    connect() {
      store.commit("SET_CONNECT", true);
    },
    async unlock(type) {
      this.unLockType = type;
      if (type === "0") {
        this.unLockLoading = true;
      } else {
        this.infiniteUnLockLoading = true;
      }
      const result = await sendApproveTo(
        this.from.address,
        type,
        this.amount,
        this.from.decimals
      );
      console.log("result", result);
      if (!result) {
        this.unLockType = "";
        this.unLockLoading = false;
        this.infiniteUnLockLoading = false;
      }
      const token = this.from;
      const { balance, allowance } = await getBalance(token);
      token.balance = balance;
      token.allowance = allowance;
      store.commit("SET_FROM", token);
      this.$forceUpdate();
      if (type === "0") {
        this.unLockLoading = false;
      } else {
        this.infiniteUnLockLoading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.button {
  height: 56px;
  font-size: 18px;
  color: var(--color-dark);
  background-image: linear-gradient(
    90deg,
    #fe719a,
    #d386ff 15.15%,
    #6dc2ff 71.46%,
    #43e2d4 91.89%
  );
  border-radius: 30px;
  margin-top: 30px;
  transition: none;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    font-size: 18px;
    font-family: "Roboto Medium";
    color: var(--color);
  }

  svg {
    width: 45px;
  }

  &.connect {
    background: var(--color-sky-blue);

    span {
      color: var(--color);
    }
  }

  &.disabled {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);

    span {
      color: var(--color-content);
    }
  }
}
</style>
